//多选用户模块

var layer = require('layer');
var checkradio = require('{plus}/checkradio');
var request = require('request');
var template = require('template');
var tmpl = require('../../views/users');
var events = require('events');
var data = require('{pub}/data');

Nui.doc.click(function(){
    layer.destroy('users')
})

return function(obj, options){
    return events({
        element:obj.element,
        events:{
            'click .choose-users':'choose'
        },
        add:function(data, elem){
            elem.append(template.render(tmpl, {data:data}));
        },
        show:function(content, container, elems){
            var that = this;
            return layer($.extend(true, {
                content:content,
                id:'users',
                container:container,
                width:308,
                maxHeight:127,
                scrollbar:false,
                isTips:true,
                isMask:false,
                close:{
                    enable:false
                },
                position:{
                    left:0,
                    top:35
                },
                onInit:function(self){
                    self.element.find(':checkbox').checkradio({
                        callback:function(ele){
                            var data = ele.data();
                            if(ele.prop('checked')){
                                that.add(data, elems)
                            }
                            else{
                                elems.find('.user input[value="'+ data.id +'"]').parent().remove();
                            }
                            obj.resize()
                        }
                    })
                },
                onDestroy:function(){
                    delete container.get(0).layer
                }
            }, options||{}))
        },
        choose:function(e, elem){
            var dom = elem.get(0);
            var that = this;
            var choosed = [];
            var users = elem.next('.users');
            users.find('.user').each(function(){
                choosed.push($(this).find('input').val())
            })
            if(!dom.layer){
                layer.destroy('users');
                var tpl = renders({
                    <%each empList%>
                    <span class="ui-checkradio">
                        <input type="checkbox" 
                        data-name="<%$value.name%>" 
                        data-id="<%$value.id%>" <%if $.inArray($value.id.toString(), choosed) !== -1%> checked<%/if%>>
                        <b class="f-toe"><%$value.name%></b>
                    </span>
                    <%/each%>
                })
                dom.layer = that.show(template.render(tpl, {
                    empList:data.get('empList'),
                    choosed:choosed,
                    name:elem.attr('name')
                }), elem, users);
            }
            e.stopPropagation();
        }
    })
}
